<template>
	<view>
		<view class="headimg flexcenter" @click="uploadImg()">
			<image :src="userInfo.avatar" mode=""></image>
			<view class="xiangji"></view>
		</view>
		<view class="ffffff mainpadding_top flexbetween" style="margin-top: 60rpx;">
			<view class="titletext hei_text bold">昵称</view>
			<input type="text" placeholder="请输入" style="text-align: right;" class="hei_text main_size bold" v-model="userInfo.nickname">
		</view>
		<view class="ffffff mainpadding_top flexbetween">
			<view class="titletext hei_text bold">性别</view>
			<view class="flexright">
				
				<u-radio-group v-model="userInfo.gender" placement="row" circle>
					<u-radio activeColor="#3478F5" :customStyle="{marginRight: '30rpx'}" label="男" name="1"></u-radio>
					<u-radio activeColor="#3478F5" label="女" name="2"></u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="ffffff mainpadding_top flexbetween">
			<view class="titletext hei_text bold">出生年月日</view>
			<view class="flexright" @click="messageTime.timeShow = true">
				<input type="text" placeholder="请选择日期" disabled="" style="text-align: right;"
					class="hei_text main_size bold" v-model="userInfo.birthday">
				<u-icon name="arrow-right" size="16" color="#999"></u-icon>
			</view>
		</view>
		<view class="ffffff mainpadding_top flexbetween">
			<view class="titletext hei_text bold">地区</view>
			<view class="flexright" @click="messageTime.timeShow = true">
				<input type="text" placeholder="请选择日期" disabled="" style="text-align: right;"
					class="hei_text main_size bold" v-model="userInfo.region">
				<u-icon name="arrow-right" size="16" color="#999"></u-icon>
			</view>
		</view>
		<view class="posibottom mainpadding" style="bottom: 0;">
			<view class="submitbtn" @click="submit()">保存</view>
		</view>
		<timePicker :messageTime="messageTime" @timeConfirm="timeConfirm"></timePicker>
		<pickercity :messageInfo="{pickerdzshow:pickerdzshow}" @surecity="surecity"></pickercity>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				messageTime: {
					timeShow: false,
					title: "选择出生年月",
					mode: "date" //date日期，datetime年月日时分秒，time时间
				},
				pickerdzshow: false,
				userInfo:{
					avatar:"",
					nickname:"",
					gender:"",
					birthday:"",
					region:"",
					province:"",
					city:"",
				},
				avatar:"",
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			submit(){
				if (this.userInfo.nickname=="") {
					httpRequest.toast("请输入昵称")
					return false
				}
				let userInfo = this.userInfo
				if(userInfo.avatar == this.avatar){
					delete userInfo.avatar
				}
				httpRequest.request('/api/user/profile', 'POST', userInfo).then(res => {
					if (res.code == 1) {
						httpRequest.toast("修改成功");
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			init() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					let data = res.data
					this.userInfo = {
						avatar:data.avatar,
						nickname:data.nickname,
						gender:data.gender.toString(),
						birthday:data.birthday,
						region:data.region,
						province:data.province,
						city:data.city,
					}
					this.avatar = data.avatar
				})
			},
			uploadImg() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					this.userInfo.avatar = res.fullurl
				}).catch(err => {});
			},
			surecity(e) {
				this.pickerdzshow = false
				if (e) {
					this.userInfo.province = e.provinceid;
					this.userInfo.city = e.cityid;
					this.userInfo.region = e.provence + "/" + e.city;
				}
			},
			timeConfirm(e){
				this.userInfo.birthday = e
			},
		}
	}
</script>

<style lang="scss" scoped>
	.headimg {
		width: 180rpx;
		height: 180rpx;
		margin: 30rpx auto 0;
		padding-top: 30rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.xiangji {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			bottom: 0;
			right: 0;
			background-size: 100% 100%;
			background-image: url('/static/image/system/avatarup.png');
		}
	}
	/deep/.u-radio-group {
		flex: none !important;
	}
</style>